<template>
  <div class="home">
    <div class="container">
      <!-- 左侧分类导航 -->
      <div class="category-nav">
        <div class="nav-header">全部商品分类</div>
        <ul>
          <li v-for="(item, index) in categories" :key="index">
            <a href="#">
              <i :class="getCategoryIcon(index)"></i>
              <span>{{ item.name }}</span>
              <i class="el-icon-arrow-right"></i>
            </a>
          </li>
        </ul>
      </div>

      <!-- 轮播图 -->
      <div class="banner">
        <el-carousel height="400px" :interval="3000" arrow="hover">
          <el-carousel-item v-for="item in banners" :key="item.id">
            <img :src="item.image" :alt="item.title">
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 热门商品 -->
      <div class="hot-products">
        <div class="section-header">
          <h2 class="section-title">热门商品</h2>
          <a href="#" class="more">查看更多 <i class="el-icon-arrow-right"></i></a>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in hotProducts" :key="item.id">
            <div class="product-card">
              <div class="product-img">
                <img :src="item.image" :alt="item.title">
              </div>
              <div class="product-info">
                <h3 class="title">{{ item.title }}</h3>
                <p class="desc">{{ item.desc || '暂无描述' }}</p>
                <div class="price-row">
                  <p class="price">¥{{ item.price }}</p>
                  <el-button type="danger" size="small" round>加入购物车</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      categories: [
        { name: '手机数码', icon: 'el-icon-mobile-phone' },
        { name: '电脑办公', icon: 'el-icon-notebook-2' },
        { name: '家用电器', icon: 'el-icon-refrigerator' },
        { name: '服装鞋包', icon: 'el-icon-shopping-bag-1' },
        { name: '食品生鲜', icon: 'el-icon-food' },
        { name: '图书音像', icon: 'el-icon-reading' },
        { name: '母婴玩具', icon: 'el-icon-present' },
        { name: '个护清洁', icon: 'el-icon-brush' }
      ],
      banners: [
        { id: 1, image: 'banner1.jpg', title: '活动1' },
        { id: 2, image: 'banner2.jpg', title: '活动2' },
        { id: 3, image: 'banner3.jpg', title: '活动3' }
      ],
      hotProducts: [
        { id: 1, title: '商品1', price: 999, image: 'product1.jpg' },
        { id: 2, title: '商品2', price: 1999, image: 'product2.jpg' },
        { id: 3, title: '商品3', price: 2999, image: 'product3.jpg' },
        { id: 4, title: '商品4', price: 3999, image: 'product4.jpg' }
      ]
    }
  },
  methods: {
    getCategoryIcon(index) {
      return this.categories[index].icon || 'el-icon-goods'
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 20px 0;

  .container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .category-nav {
    width: 200px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    z-index: 10;
    
    .nav-header {
      background: #e1251b;
      color: #fff;
      padding: 12px 15px;
      font-size: 16px;
      font-weight: bold;
    }
    
    ul {
      padding: 10px 0;
      
      li {
        padding: 0;
        
        a {
          padding: 8px 15px;
          display: flex;
          align-items: center;
          color: #333;
          transition: all 0.3s;
          
          i {
            margin-right: 8px;
            font-size: 16px;
            
            &.el-icon-arrow-right {
              margin-left: auto;
              margin-right: 0;
              font-size: 12px;
              color: #999;
            }
          }
          
          &:hover {
            background: #f5f5f5;
            color: #e1251b;
          }
        }
      }
    }
  }

  .banner {
    margin-left: 220px;
    margin-bottom: 30px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    .el-carousel {
      border-radius: 4px;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .hot-products {
    margin-top: 30px;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .section-title {
        font-size: 24px;
        font-weight: bold;
        position: relative;
        padding-left: 12px;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 20px;
          background: #e1251b;
          border-radius: 2px;
        }
      }
      
      .more {
        color: #999;
        font-size: 14px;
        
        &:hover {
          color: #e1251b;
        }
        
        i {
          margin-left: 4px;
        }
      }
    }
    
    .product-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 20px;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      }
      
      .product-img {
        height: 200px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s;
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }
      
      .product-info {
        padding: 15px;
        
        .title {
          margin: 0 0 8px;
          font-size: 16px;
          font-weight: normal;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .desc {
          color: #999;
          font-size: 12px;
          margin: 0 0 10px;
          height: 36px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        .price-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .price {
            color: #e1251b;
            font-size: 20px;
            font-weight: bold;
            margin: 0;
            
            &::before {
              content: '¥';
              font-size: 14px;
              margin-right: 2px;
            }
          }
        }
      }
    }
  }
}
</style>